<template>
  <view class="container">
    <view class="card">
      <text class="title">法语句子相似度匹配</text>
      
      <view class="form-group">
        <text class="label">参考句子列表:</text>
        <view class="reference-list" v-for="(ref, index) in referenceText" :key="index">
          <text class="ref-index">{{ index + 1 }}.</text>
          <text class="ref-text">{{ ref }}</text>
        </view>
      </view>
      
      <view class="form-group">
        <text class="label">待匹配句子:</text>
        <textarea 
          v-model="comparisonText" 
          placeholder="输入需要比较的法语句子"
          @input="validateInput"
        ></textarea>
      </view>
      
      <button 
        class="btn-calculate" 
        :disabled="!isValid"
        @click="calculateSimilarity"
      >
        计算相似度
      </button>
      
      <view v-if="results.length > 0" class="result-container">
        <view class="overall-result">
          <text class="result-title">总体匹配度</text>
          <text class="result-value">{{ (maxScore * 100).toFixed(2) }}%</text>
          <text class="result-description">{{ getDescription(maxScore) }}</text>
        </view>
        
        <view class="detail-results">
          <text class="detail-title">详细结果:</text>
          <view class="result-item" v-for="(result, index) in results" :key="index">
            <text class="ref-label">参考句子 {{ index + 1 }}:</text>
            <text class="ref-content">{{ result.reference }}</text>
            <view class="score-bar">
              <view class="score-fill" :style="{ width: result.score * 100 + '%' }"></view>
            </view>
            <text class="score-value">{{ (result.score * 100).toFixed(2) }}%</text>
          </view>
        </view>
      </view>
      
      <view v-if="errorMessage" class="error-message">
        <text>{{ errorMessage }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { calculateFrenchSimilarity } from "@/src/utils/nlp-utils.js";

export default {
  data() {
    return {
      // 参考句子列表
      referenceText: [
        'Comment ça va?',
        'Tu vas bien?',
        'Quel est ton nom?',
        'Où habites-tu?'
      ],
      comparisonText: '',
      results: [],        // 所有比对结果
      maxScore: null,     // 最高相似度
      errorMessage: '',
      isValid: false
    };
  },
  methods: {
    // 计算与所有参考句子的相似度
    calculateSimilarity() {
      this.errorMessage = '';
      this.results = [];
      
      try {
        // 对每个参考句子计算相似度
        this.referenceText.forEach(reference => {
          const score = calculateFrenchSimilarity(reference, this.comparisonText);
          this.results.push({
            reference,
            score
          });
        });
        
        // 找出最高相似度
        if (this.results.length > 0) {
          this.maxScore = Math.max(...this.results.map(r => r.score));
        }
      } catch (error) {
        console.error('相似度计算出错:', error);
        this.errorMessage = '计算相似度时出错，请检查输入';
      }
    },
    
    // 输入验证
    validateInput() {
      this.isValid = this.referenceText.length > 0 && 
                     this.comparisonText.trim().length > 0;
    },
    
    // 根据相似度获取描述
    getDescription(score) {
      if (score >= 0.8) {
        return '匹配度非常高，句子基本一致';
      } else if (score >= 0.6) {
        return '匹配度良好，句子意思相近';
      } else if (score >= 0.4) {
        return '有一定匹配度，但存在明显差异';
      } else {
        return '匹配度较低，句子差异较大';
      }
    }
  },
  
  // 初始化验证
  created() {
    this.validateInput();
  }
};
</script>

<style scoped>
.container {
  padding: 30rpx;
}

.card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.05);
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
  color: #333;
}

.form-group {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  margin-bottom: 15rpx;
  color: #555;
}

.reference-list {
  background-color: #f9f9f9;
  border-radius: 12rpx;
  padding: 20rpx;
}

.ref-index {
  font-weight: bold;
  margin-right: 10rpx;
  color: #007AFF;
}

.ref-text {
  font-size: 28rpx;
  line-height: 1.5;
}

textarea {
  width: 100%;
  height: 200rpx;
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 12rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  line-height: 1.5;
}

.btn-calculate {
  background-color: #007AFF;
  color: white;
  text-align: center;
  padding: 25rpx 0;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 20rpx;
}

.btn-calculate[disabled] {
  background-color: #CCCCCC;
  cursor: not-allowed;
}

.result-container {
  margin-top: 40rpx;
}

.overall-result {
  background-color: #f5f7fa;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.result-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #555;
  display: block;
  margin-bottom: 15rpx;
}

.result-value {
  font-size: 60rpx;
  font-weight: bold;
  color: #007AFF;
  display: block;
  margin-bottom: 15rpx;
}

.result-description {
  font-size: 30rpx;
  color: #666;
}

.detail-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #555;
  display: block;
  margin-bottom: 20rpx;
}

.result-item {
  background-color: #f9f9f9;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.ref-label {
  font-weight: bold;
  color: #007AFF;
  font-size: 28rpx;
  display: block;
  margin-bottom: 10rpx;
}

.ref-content {
  font-size: 28rpx;
  line-height: 1.5;
  display: block;
  margin-bottom: 15rpx;
}

.score-bar {
  height: 20rpx;
  background-color: #e0e0e0;
  border-radius: 10rpx;
  overflow: hidden;
  margin-bottom: 10rpx;
}

.score-fill {
  height: 100%;
  background-color: #007AFF;
  transition: width 0.5s ease;
}

.score-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.error-message {
  color: #FF3B30;
  font-size: 28rpx;
  margin-top: 20rpx;
  text-align: center;
}
</style>